<template>
	<view class="task-details-flow">
		<view class="van-steps van-steps--vertical">
			<view class="van-steps__items">
				<view class="van-hairline van-step van-step--vertical" v-for="(item,index) in stepsList" :key="index">
					<view class="van-step__title">
						<p class="step-title">{{item.createUsername}}</p>
						<view class="steps-item-desc">
							<view class="steps-item-desc-ctn">
								<text>{{item.taskName}}</text><text
									class="steps-item-desc-ctn-time">{{item.createTime}}</text>
							</view>
							<view v-if="item.taskComment" class="steps-item-desc-operation">
								<text>{{ item.taskComment }}</text>
							</view>
						</view>
					</view>
					<view class="van-step__circle-container">
						<view class="steps-item-icon">
							<img :src="item.headImageUrl" alt="" class='u-image'>
<!-- 							<u-image height="100%" ></u-image> -->
							<view class="steps-item-startIcon">
								<view
									:class="['mobile-font' , getOperationIconName(item.approvalType) === 'success' ? 'icon-success' : 'icon-close']"
									style="font-size:12px;opacity:1;z-index: 999;"
									:style="{color: getOperationBakgroundColor(item.approvalType)}"
								/>
							</view>
						</view>
					</view>
					<view class="van-step__line"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { FlowOperationController } from '@/api/flowController.js';
	import {
		getHeadImageUrl
	} from '@/utils'

	export default {
		props: {
			processInstanceId: {
				type: String
			}
		},
		data() {
			return {
				stepsList: []
			}
		},
		mounted() {
			this.getTaskFlowList()
		},
		methods: {
			getTaskFlowList() {
				FlowOperationController.listFlowTaskComment(this, {
					processInstanceId: this.processInstanceId
				}).then(res => {
					this.stepsList = res;
					for (let item of this.stepsList) {
						item.headImageUrl = getHeadImageUrl(item);
					}
				}).catch(e => {});
			},
			getOperationTagType(type) {
				switch (type) {
					case 'agree':
					case 'multi_agree':
					case 'set_assignee':
						return 'success';
					case 'refuse':
					case 'multi_refuse':
						return 'warning';
					case 'stop':
					case 'reject':
					case 'rejectToStart':
					case 'rejectToTask':
					case 'revoke':
						return 'danger';
					default:
						return 'primary';
				}
			},
			getOperationBakgroundColor(type) {
				let temp = this.getOperationTagType(type);
				switch (temp) {
					case 'success':
						return '#00B042';
					case 'danger':
						return '#EE0A24';
					default:
						return '#FF976A';
				}
			},
			getOperationIconName(type) {
				let temp = this.getOperationTagType(type);
				switch (temp) {
					case 'success':
						return 'success';
					case 'danger':
						return 'close';
					default:
						return 'close';
				}
			}
		}
	}
</script>

<style lang="less">
	// common
	@padding-base: 4px;
	@padding-xs: @padding-base * 2;
	@padding-sm: @padding-base * 3;
	@padding-md: @padding-base * 4;
	@padding-lg: @padding-base * 6;
	@padding-xl: @padding-base * 8;
	@gray-3: #ebedf0;
	@gray-6: #969799;
	@gray-8: #323233;
	@green: #07c160;
	@white: #fff;
	@text-color: @gray-8;
	// Font
	@font-size-xs: 10px;
	@font-size-sm: 12px;
	@font-size-md: 14px;
	@font-size-lg: 16px;
	@font-weight-bold: 500;
	@line-height-xs: 14px;
	@line-height-sm: 18px;
	@line-height-md: 20px;
	@line-height-lg: 22px;
	@border-color: @gray-3;
	@animation-duration-base: 0.3s;
	// Step
	@step-text-color: @gray-6;
	@step-active-color: @green;
	@step-process-text-color: @text-color;
	@step-font-size: @font-size-md;
	@step-line-color: @border-color;
	@step-finish-line-color: @green;
	@step-finish-text-color: @text-color;
	@step-icon-size: 12px;
	@step-circle-size: 5px;
	@step-circle-color: @gray-6;
	@step-horizontal-title-font-size: @font-size-sm;

	.van-steps {
		overflow: hidden;
		background-color: #fff;

		&--horizontal {
			padding: 10px 10px 0;

			.van-steps__items {
				position: relative;
				display: flex;
				margin: 0 0 10px;
				padding-bottom: 22px;
			}
		}

		&--vertical {
			padding: 0 0 0 @padding-xl;
		}

		.van-step {
			position: relative;
			flex: 1;
			color: @step-text-color;
			font-size: @step-font-size;

			&__circle {
				display: block;
				width: @step-circle-size;
				height: @step-circle-size;
				background-color: @step-circle-color;
				border-radius: 50%;
			}

			&__line {
				position: absolute;
				background-color: @step-line-color;
				transition: background-color @animation-duration-base;
			}

			&--horizontal {
				float: left;

				&:first-child {
					.van-step__title {
						margin-left: 0;
						transform: none;
					}
				}

				&:last-child {
					position: absolute;
					right: 1px;
					width: auto;

					.van-step__title {
						margin-left: 0;
						transform: none;
					}

					.van-step__circle-container {
						right: -9px;
						left: auto;
					}
				}

				.van-step__circle-container {
					position: absolute;
					top: 30px;
					left: -@padding-xs;
					z-index: 1;
					padding: 0 @padding-xs;
					background-color: @white;
					transform: translateY(-50%);
				}

				.van-step__title {
					display: inline-block;
					margin-left: 3px;
					font-size: @step-horizontal-title-font-size;
					transform: translateX(-50%);

					@media (max-width: 321px) {
						font-size: @step-horizontal-title-font-size - 1px;
					}
				}

				.van-step__line {
					top: 30px;
					left: 0;
					width: 100%;
					height: 1px;
					border: 1px dashed #C1C2C4;
				}

				.van-step__icon {
					display: block;
					font-size: @step-icon-size;
				}

				.van-step--process {
					color: @step-process-text-color;
				}
			}

			&--vertical {
				display: block;
				float: none;
				padding: 6px 10px 10px 0;
				line-height: @line-height-sm;

				&:not(:last-child)::after {
					border-bottom-width: 1px;
				}

				.van-step__circle-container {
					position: absolute;
					top: 19px;
					left: -15px;
					z-index: 1;
					font-size: @step-icon-size;
					line-height: 1;
					transform: translate(-50%, -50%);
				}

				.van-step__line {
					top: 16px;
					left: -15px;
					width: 1px;
					height: 100%;
					border: 1px dashed #C1C2C4;
				}
			}

			&:last-child {
				.van-step__line {
					width: 0;
					border: none;
				}
			}

			&--finish {
				color: @step-finish-text-color;

				.van-step__circle,
				.van-step__line {
					// background-color: @step-finish-line-color;
				}
			}

			&__icon,
			&__title {
				transition: color @animation-duration-base;

				&--active,
				&--finish {
					color: @step-active-color;
				}
			}
		}
	}

	.step-title {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.steps-item-desc {
		margin-left: 30rpx;
	}

	.steps-item-desc-ctn {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;

		text {
			font-size: 24rpx;
			color: #999;
			font-weight: 400;
		}

		.steps-item-desc-ctn-time {
			font-size: 24rpx;
			color: #999;
		}
	}

	.steps-item-desc-operation {
		width: 100%;
		margin: 10rpx 0;
		padding: 0 10rpx;
		background: #F6F7F9;
		border-radius: 8rpx;
		display: flex;
		align-items: center;

		text {
			width: 100%;
			font-size: 28rpx;
			color: #666666;
			font-weight: 400;
			padding: 10rpx;
			overflow-wrap: break-word;
		}
	}

	::v-deep.steps-item-icon {
		width: 84rpx;
		height: 84rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ffffff;
		position: relative;
		
		img{
			width: 80%;
			height: 80%;
		}
	}

	.steps-item-startIcon {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		position: absolute;
		bottom: -1px;
		left: calc(100% - 30rpx);
		border: 2px solid #ffffff;
		background-color: #ffffff;
	}

	.task-details-flow {
		height: 100%;
		margin: 0rpx 32rpx 32rpx 32rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}
</style>